<template>
  <div class="page content">
    <div class="notice-list">
      <t-loading v-if="loading"></t-loading>
      <div class="notice-item" @click="onNoticeDetails(item.id)" v-for="item in dataList" :key="item.id">
        <div class="title">{{ item.title }}</div>
        <div class="footer">
          <span class="date">{{ item.createTime }}</span>
        </div>
      </div>
      <div class="page">
        <Page :total="totalPage" @on-page-size-change="onPageSize" :current="form.pageNo" @on-change="onPage"
          :page-size="form.pageSize" show-sizer />
      </div>
    </div>
  </div>
</template>

<script>
import { contentList } from "@/api/content";
import TLoading from "@/components/t-loading";

export default {
  name: "index",
  components: { TLoading },
  data() {
    return {
      loading: false,
      value: '',
      totalPage: 1,
      dataList: [],
      form: {
        position: 'beginner',
        // typeId: '1739560698667700225',
        pageNo: 1,
        pageSize: 20
      }
    }
  },
  created() {
    this.getHelpContentList();
  },
  methods: {
    onPage(index) {
      this.form.pageNo = index;
      this.getDataList();
    },
    onNoticeDetails(id) {
      // 公告详情
      this.$router.push(`/notice/${id}`)
    },
    onPageSize(size) {
      // 显示
      this.form.pageSize = size;
      this.form.pageNo = 1;
      this.getDataList();
    },
    onTab(name) {
      this.$router.push(name);
    },
    getHelpContentList() {
      // 帮助中心
      this.loading = true;
      contentList(this.form).then((res) => {
        this.loading = false;
        this.dataList = res.result
      }).catch(() => {
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped lang="less">
.content {
  background: none !important;
}

.page {
  width: 1200px;
  margin: 50px auto;

  .notice-list {
    .notice-item {
      border-bottom: 1px solid @t-table-border-color;
      padding: 12px 0;

      .title {
        cursor: pointer;
        color: @t-title-color;
        font-size: 14px;
        font-weight: 500;

        &:hover {
          color: @primary-color;
        }
      }

      .footer {
        text-align: right;

        .date {
          margin-top: 12px;
          color: @t-special-color;
          font-size: 14px;
        }
      }
    }

    .page {
      margin: 24px 0;
      text-align: right;
    }
  }
}
</style>